<template>
	<view class="container">
		
		<view class="bottom-view_2">
			<view class="sales-hotline">
			  <text class="hotline-text">销售热线</text>
			  <text class="hotline-text_2">{{info.contactPhone}}</text>
			</view>
			<view class="call_phone" @click.stop="handleConsult">
				<image src="/static/product/product_phone.png" mode="aspectFill" style="width: 28rpx;height: 28rpx;"></image>
				<text style="margin-left: 6px;">立即咨询</text>
			</view>
		</view>
		
		<scroll-view class="scrollview_content" scroll-y="true" :enable-flex="true" :show-scrollbar="false" enhanced="true">
			  <view class="swiper-box">
			  	<swiper class="swiper-content" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" @change=swiperChange>
			  		<swiper-item v-for="(item ,index) in info.images" :key="index" :data-index="index">
			  			<image class="imageCss" :src="$imageUrl(item)" mode="aspectFit"></image>
			  		</swiper-item>
			  	</swiper>
				<view class="page-indicator" v-if="images.length > 0">{{indexStr}}</view>
			  </view>
			<view class="product-title">{{info.productName}}</view>
		
		  <view class="parameter-item richText">
		  	<view class="parameter-title">产品规格</view>
			<rich-text style="width: 100%;" :nodes="formatRichText(info.productSpec)"></rich-text>
		  </view>
			
			<view class="parameter-item">
				<view class="parameter-title">应用场景</view>
				<view class="parameter-item-content">
					<view class="parameter-item-row">
						<image src="/static/product/sense_1.png" mode="aspectFill" style="width: 80rpx;height: 80rpx;margin-right: 16rpx;"></image>
						<text>工业园区</text>
					</view>
					<view class="parameter-item-row">
						<image src="/static/product/sense_2.png" mode="aspectFill" style="width: 80rpx;height: 80rpx;margin-right: 16rpx;"></image>
						<text>商业中心</text>
					</view>
					<view class="parameter-item-row">
						<image src="/static/product/sense_3.png" mode="aspectFill" style="width: 80rpx;height: 80rpx;margin-right: 16rpx;"></image>
						<text>住宅小区</text>
					</view>
					<view class="parameter-item-row">
						<image src="/static/product/sense_4.png" mode="aspectFill" style="width: 80rpx;height: 80rpx;margin-right: 16rpx;"></image>
						<text>医疗机构</text>
					</view>
				</view>
			</view>
			
			<view class="parameter-item richText">
				<view class="parameter-title">产品特点</view>
				<rich-text style="width: 100%;" :nodes="formatRichText(info.feature)"></rich-text>
			</view>
			
			<view style="height: 10rpx;">
				
			</view>
			
		</scroll-view>

	</view>

</template>

<script>
  export default {
    data() {
      return {
        swiperCurrent: 0,
		info:{
			// applicationScenario: "应用场景1",
			// contactPhone: "电话1",
			// createTime: "2022-01-01",
			// feature: "产品特征1",
			// images: ["/static/product/goods_sample.png","/static/product/goods_sample.png"],
			// mainImage: "/static/product/goods_sample.png",
			// productName: "产品1",
			// productSpec: "规格1",
			// tag: "标签1",
			
			// id:'0',
			// mainImage:'',
			// images:[],
			// productName:'',
			// productSpec:'',
			// tag:'',
			// feature:'',
			// createTime:'',
			// contactPhone:'',
			// applicationScenario:'',
		}
      }
    },
	computed:{
		images(){
			return this.info.images || [];
		},
		indexStr(){
			let images = this.info.images || []
			return (this.swiperCurrent + 1) + '/' + images.length;
		}
	},
	onLoad() {
		if(this.$Route.query.source == '1') {
			this.info = this.$Route.query || {}
		} else {
			let url = '/loyu-api/app/product/detail/' + this.$Route.query.itemId || ''
			
			let self = this;
			self.$progressHud.showLoading();
			self.$NetApi.getMethod(url).then(ok => {
				self.$progressHud.hideLoading();
				self.info = ok.data;
			}, fail => {
				self.$progressHud.hideLoading();
				self.$progressHud.showToast(fail.errMsg || '网络错误');
			})
		}
	},
    methods: {
      swiperChange(e) {
        this.swiperCurrent = e.detail.current
      },
      handleConsult() {
		  let self = this;
		  uni.showActionSheet({
		  	itemList:[self.info.contactPhone],
		  	title:'拨打电话',
		  	success: (res) => {
		  		uni.makePhoneCall({
		  			phoneNumber:self.info.contactPhone
		  		})
		  	}
		  })
      },
	formatRichText(html) {
	    if (!html) return html;
	    
	    // 1. 清除原图内联样式（关键！避免覆盖）
	    let content = html
	      .replace(/(<img[^>]*)style="[^"]*"/gi, '$1')  // 删除 style 属性
	      .replace(/(<img[^>]*)width="[^"]*"/gi, '$1')   // 删除 width 属性
	      .replace(/(<img[^>]*)height="[^"]*"/gi, '$1'); // 删除 height 属性
	  
	    // 2. 注入自适应样式
	    content = content.replace(
	      /<img/gi, 
	      '<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"'
	    );
	  
	    return content;
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background-color:#FFF;
		position: relative;
	}
	.scrollview_content{
		width: 100%;
		height: calc(100% - 72px);
	}
	.swiper-box {
	  width: 100%;
	  position: relative;
	  padding-top: 56.2667%; /* 计算方式：211/375 * 100% ≈56.2667% */
	}
	.swiper-content {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.imageCss{
		width: 100%;
		height: 100%;
	}
	.page-indicator{
		position: absolute;
		right: 16rpx;
		bottom: 16rpx;
		padding: 8rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 8rpx;
		
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #FFF;
	}
	.product-title{
		font-family: Roboto;
		font-size: 40rpx;
		font-weight: 600;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #000000;
		
		margin-left: 32rpx;
		margin-top: 48rpx;
		margin-bottom: 32rpx;
	}
	.parameter-item{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: calc(100% - 64rpx);
		overflow: clip;
		
		padding: 32rpx;
		margin: 0 32rpx 32rpx 32rpx;
		border-radius: 16rpx;
		background-color: #F9FAFB;
	}
	.parameter-title{
		font-family: Roboto;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #000000;
		margin-bottom: 24rpx;
	}
	.parameter-item-content{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 32rpx;
	}
	.parameter-item-row{
		flex: 1 0 calc(50% - 17rpx);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
	}
	.bottom-view_2{
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background-color: #FFF;
		padding: 24rpx 32rpx;
		
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		
		display: flex;
		flex-direction: row;
		justify-content: space-between !important;
		align-items: center;
		z-index: 100;
	}
	.sales-hotline{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.hotline-text{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.hotline-text_2{
		font-family: Roboto;
		font-size: 18px;
		font-weight: 500;
		line-height: 56rpx;
		letter-spacing: normal;
		color: $power-color-primary;
	}
	.call_phone{
		border-radius: 8rpx;
		background: $power-color-primary;
		
		height: 74rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
		gap: 0px 0px;
		flex-wrap: wrap;
		align-content: center;
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #FFFFFF;
	}
</style>